<template>
  <el-dialog class="ruleForm_html" :visible.sync="dialog_html" width="10rem" @open="openDialog" @close="closeDialog" :close-on-click-modal="false">
    <div slot="title" class="title">新增网页</div>
    <el-form ref="ruleForm_html" :model="ruleForm_html" :rules="rules" label-width="1.2rem">
      <el-form-item prop="approveProcess" label="审批流程：">
        <el-select v-model="ruleForm_html.approveProcess" placeholder="请选择">
          <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item" style="font-size: 0.16rem;" />
        </el-select>
      </el-form-item>
      <el-form-item label="网页名称：" prop="name">
        <el-input v-model.trim="ruleForm_html.name" placeholder="请输入网页名称" clearable />
      </el-form-item>
      <el-form-item label="网页地址：" prop="url">
        <el-input v-model.trim="ruleForm_html.url" placeholder="请输入网页地址" clearable>
          <el-select v-model="select" slot="prepend" style="width:1.3rem;">
            <el-option label="http://" value="http://"></el-option>
            <el-option label="https://" value="https://"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="终端类别：" prop="terminalType" class="terminalType">
        <el-checkbox-group v-model="ruleForm_html.terminalType" @change="checkboxGroup">
          <el-checkbox v-for="item in checkOptions" :key="item.code" :label="item.code" :disabled="item.code=='wxList'">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div v-for="(item, index) in checkTable" :key="index" class="terminal" v-show="ruleForm_html.terminalType.includes(item.key)">
      <p><svg-icon icon-class="right" style="color:#516FE9;" /> {{ item.label }}</p>
      <el-table :ref="`${item.key}html`" :data="item.data" border style="width: 100%" @select="selection(item.key)" @selection-change="selectionChange" @select-all="selection(item.key)">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column v-for="(data, key) in item.header" :key="key" :prop="data.key" :label="data.label" align="center" />
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="Submission('ruleForm_html', 'hold')">保 存</el-button>
      <el-button type="primary" @click="Submission('ruleForm_html', 'submit')">提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { bus } from '@/main'

export default {
  data() {
    const validCheck = (rule, value, callback) => {
      if (!this.ruleForm_html.terminalType.length > 0) {
        callback(new Error('请选择终端类别'))
      } else {
        callback()
      }
    }
    return {
      options: [],
      ruleForm_html: {
        approveProcess: '',
        name: '',
        url: '',
        wxList: '', // 微信
        ydList: '', // 移动服务平台
        otherList: '', // 其他软件平台
        hardwareList: '', // 硬件终端
        terminalType: []
      },
      select: 'http://',
      tableIndex: '',
      checkOptions: [],
      terminalList: { // 终端列表
        wxList: [], // 微信
        ydList: [], // 移动服务平台
        otherList: [], // 其他软件平台
        hardwareList: [] // 硬件终端
      },
      checkTable: [],
      rules: {
        approveProcess: [
          { required: false, trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入网页名称', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入网页地址', trigger: 'blur' }
        ],
        terminalType: [
          { required: true, validator: validCheck, trigger: 'blur' }
        ]
      },
      disabled: false,
      dialog_html: false
    }
  },
  methods: {
    // 获取父级参数
    getParam(param) {
      this.dialog_html = param.open
      if (param.data) {
        this.ruleForm_html = param.data
        // let num = this.ruleForm_html.url.indexOf('//') + 2
        // this.select = this.ruleForm_html.url.slice(0, num)
        // this.ruleForm_html.url = this.ruleForm_html.url.replace(this.select)
      }
    },
    // 打开上传弹窗
    openDialog() {
      const _this = this
      // 审批流程下拉框
      this.$api.getApproveProcess().then(response => {
        if (response.data.status == 1) {
          _this.options = response.data.data
          _this.ruleForm_html.approveProcess = this.options[0]
        } else {
          this.$message.error(response.data.msg)
        }
      })
      // 请求终端类型
      this.$api.getTerminal().then((response) => {
        if (response.data.status == 1) {
          _this.checkOptions = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      })
      // 请求终端列表
      this.$api.getTerminalList().then((response) => {
        if (response.data.status == 1) {
          _this.terminalList = response.data.data
          this.checkTableFN()
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 关闭上传弹窗
    closeDialog() {
      this.ruleForm_html = {
        approveProcess: this.options[0],
        name: '',
        url: '',
        wxList: '', // 微信
        ydList: '', // 移动服务平台
        otherList: '', // 其他软件平台
        hardwareList: '', // 硬件终端
        terminalType: []
      }
      this.select = 'http://'
      this.terminalList = {
        wxList: [],
        ydList: [],
        otherList: [],
        hardwareList: []
      },
      this.checkTable = []
      this.dialog_html = false
    },
    // 发布终端table
    checkTableFN() {
      this.checkTable = [
        {
          label: '微信公众号',
          key: 'wxList',
          header: [
            { label: '微信公众号名称', key: 'name' },
            { label: '负责人', key: 'manager' }
          ],
          data: this.terminalList.wxList
        },
        {
          label: '移动服务平台',
          key: 'ydList',
          header: [
            { label: '移动服务平台名称', key: 'name' },
            { label: '负责人', key: 'manager' }
          ],
          data: this.terminalList.ydList
        },
        {
          label: '其他软件终端',
          key: 'otherList',
          header: [
            { label: '软件终端名称', key: 'name' },
            { label: '栏目', key: 'section' },
            { label: '负责人', key: 'manager' }
          ],
          data: this.terminalList.otherList
        },
        {
          label: '硬件终端',
          key: 'hardwareList',
          header: [
            { label: '硬件终端名称', key: 'name' },
            { label: '负责人', key: 'manager' }
          ],
          data: this.terminalList.hardwareList
        }
      ]
    },
    // 终端类别
    checkboxGroup() {
      const keyArr = Object.keys(this.terminalList)
      keyArr.forEach(item => {
        if (!this.ruleForm_html.terminalType.includes(item)) {
          this.ruleForm_html[item] = ''
          this.$refs[`${item}html`][0].clearSelection();
        }
      });
    },
    selection(key) {
      this.tableIndex = key
    },
    selectionChange(data) {
      setTimeout(() => {
        const arr = []
        for (const i in data) {
          arr.push(data[i].id)
        }
        this.ruleForm_html[this.tableIndex] = arr.join(',')
      }, 500)
    },
    // 新增网页 - 保存/提交
    Submission(formName, key) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const checkList = this.ruleForm_html.terminalType
          let num = false
          for (let i = 0; i < checkList.length; i++) {
            const key = checkList[i]
            if (!this.ruleForm_html[key].length > 0) {
              num = false
              return this.$message.error('请选择需发布的终端')
            } else {
              num = true
            }
          }
          if (num) {
            const obj = JSON.parse(JSON.stringify(this.ruleForm_html))
            obj.url = `${this.select}${obj.url}`
            if (obj.terminalType.length == 1) {
              obj.terminalType = obj.terminalType[0]
            } else {
              obj.terminalType = obj.terminalType.join(',')
            }
            if (key == 'hold') {
              this.$api.preservationHtml(obj).then((response) => {
                if (response.data.status == 1) {
                  this.dialog_html = false
                  this.$message.success(response.data.msg)
                  bus.$emit('refreshList')
                } else {
                  this.$message.error(response.data.msg)
                }
              })
            } else if (key == 'submit') {
              this.$api.submitHtml(obj).then((response) => {
                if (response.data.status == 1) {
                  this.dialog_html = false
                  this.$message.success(response.data.msg)
                  bus.$emit('refreshList')
                } else {
                  this.$message.error(response.data.msg)
                }
              })
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ruleForm_html {
>>>.el-dialog{
    overflow: hidden;
    border-radius: 0.05rem;
    * {
      font-size: 0.16rem;
    }
    .el-dialog__header {
      background: #536FEA;
      padding: 0 0.2rem;
      height: 0.55rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title, .el-dialog__close {
        color: #fff;
        font-size: 0.2rem;
      }
      .el-dialog__headerbtn {
        position: static;
      }
    }
    .el-dialog__body {
      padding: 0.15rem 0.2rem;
      .el-upload__tip {
        color:red;
        width:78%;
        margin: 0 auto;
        line-height: 0.2rem;
      }
      .el-form {
        .el-form-item__label {
          font-size: 0.16rem;
        }
      }
    }
    .el-dialog__footer {
      padding: 0 0.2rem 0.2rem;
    }
  }
}
</style>
